<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品展示</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .product-card {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .product-image {
            transition: transform 0.3s ease;
        }

        .product-card:hover .product-image {
            transform: scale(1.05);
        }

        .nav-link {
            position: relative;
            color: #6b7280;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .nav-link:hover {
            color: #6366f1;
        }

        .nav-link.active {
            color: #6366f1;
            font-weight: 600;
        }

        .nav-link::after {
            content: '';
            display: block;
            width: 0;
            height: 2px;
            background: #6366f1;
            transition: width 0.3s;
            position: absolute;
            bottom: -4px;
            left: 0;
        }

        .nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
        }

        .product-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .product-footer {
            margin-top: auto;
            padding-top: 1rem;
        }
    </style>
</head>
<body class="bg-gray-50">
<header class="bg-white shadow-sm">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <div class="flex items-center space-x-8">
            <h1 class="text-2xl font-bold text-indigo-600">轻松购</h1>
            <nav class="hidden md:flex space-x-6">
                <a href="/" class="nav-link">首页</a>
                <a href="#" class="nav-link active">商品列表</a>
            </nav>
        </div>
        <div class="flex items-center space-x-4">
            <div class="relative hidden md:block">
                <input type="text" placeholder="搜索商品..."
                       class="pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                <i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i>
            </div>
            <button class="p-2 text-gray-600 hover:text-indigo-600 relative">
                <i class="fas fa-shopping-cart text-xl"></i>
                <span class="absolute -top-1 -right-1 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
            </button>
            <button class="md:hidden p-2 text-gray-600 hover:text-indigo-600">
                <i class="fas fa-bars text-xl"></i>
            </button>
        </div>
    </div>
</header>

<main class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-8">
        <h2 class="text-3xl font-bold text-gray-800">商品列表</h2>
        <div class="flex space-x-2">
            <button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition">分类</button>
            <button class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-100 transition">筛选</button>
        </div>
    </div>

    <!-- 产品列表 -->
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"
             th:each="goods : ${goodsList}">
            <div class="relative overflow-hidden h-64">
                <img src="" th:src="${goods.img}" alt="" class="product-image w-full h-full object-cover">
<!--                <div class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">-->
<!--                    促销-->
<!--                </div>-->
            </div>
            <div class="p-4 product-content">
                <div class="flex justify-between items-start">
                    <h3 class="font-semibold text-lg mb-1" th:text="${goods.title}">商品名</h3>
                    <button class="text-gray-400 hover:text-red-500">
                        <i class="far fa-heart"></i>
                    </button>
                </div>
                <p class="text-gray-600 text-sm mb-3" th:text="${goods.descr}">商品简介</p>
                <div class="product-footer">
                    <div class="flex justify-between items-center">
                        <div>
                            <span class="text-indigo-600 font-bold" th:text="${goods.price}">¥99.99</span>
                            <!--                            <span class="text-gray-400 text-sm line-through ml-2">¥249.99</span>-->
                        </div>
                        <button class="add-to-cart bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition"
                                onclick="addToCart('智能手表 Pro', 199.99)">
                            <i class="fas fa-cart-plus mr-1"></i> 加入购物车
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 产品 1 -->
        <!--        <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">-->
        <!--            <div class="relative overflow-hidden h-64">-->
        <!--                <img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80" alt="智能手表" class="product-image w-full h-full object-cover">-->
        <!--                <div class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">促销</div>-->
        <!--            </div>-->
        <!--            <div class="p-4 product-content">-->
        <!--                <div class="flex justify-between items-start">-->
        <!--                    <h3 class="font-semibold text-lg mb-1">智能手表 Pro</h3>-->
        <!--                    <button class="text-gray-400 hover:text-red-500">-->
        <!--                        <i class="far fa-heart"></i>-->
        <!--                    </button>-->
        <!--                </div>-->
        <!--                <p class="text-gray-600 text-sm mb-3">高级健身追踪与OLED显示屏</p>-->
        <!--                <div class="product-footer">-->
        <!--                    <div class="flex justify-between items-center">-->
        <!--                        <div>-->
        <!--                            <span class="text-indigo-600 font-bold">¥199.99</span>-->
        <!--                            <span class="text-gray-400 text-sm line-through ml-2">¥249.99</span>-->
        <!--                        </div>-->
        <!--                        <button class="add-to-cart bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition" onclick="addToCart('智能手表 Pro', 199.99)">-->
        <!--                            <i class="fas fa-cart-plus mr-1"></i> 加入购物车-->
        <!--                        </button>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->

        <!--        &lt;!&ndash; 产品 2 &ndash;&gt;-->
        <!--        <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">-->
        <!--            <div class="relative overflow-hidden h-64">-->
        <!--                <img src="https://images.unsplash.com/photo-1601784551446-20c9e07cdbdb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80" alt="无线耳机" class="product-image w-full h-full object-cover">-->
        <!--            </div>-->
        <!--            <div class="p-4 product-content">-->
        <!--                <div class="flex justify-between items-start">-->
        <!--                    <h3 class="font-semibold text-lg mb-1">无线耳机</h3>-->
        <!--                    <button class="text-gray-400 hover:text-red-500">-->
        <!--                        <i class="far fa-heart"></i>-->
        <!--                    </button>-->
        <!--                </div>-->
        <!--                <p class="text-gray-600 text-sm mb-3">降噪功能，30小时续航</p>-->
        <!--                <div class="product-footer">-->
        <!--                    <div class="flex justify-between items-center">-->
        <!--                        <div>-->
        <!--                            <span class="text-indigo-600 font-bold">¥149.99</span>-->
        <!--                        </div>-->
        <!--                        <button class="add-to-cart bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition" onclick="addToCart('无线耳机', 149.99)">-->
        <!--                            <i class="fas fa-cart-plus mr-1"></i> 加入购物车-->
        <!--                        </button>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->

        <!--        &lt;!&ndash; 产品 3 &ndash;&gt;-->
        <!--        <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">-->
        <!--            <div class="relative overflow-hidden h-64">-->
        <!--                <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80" alt="智能手机" class="product-image w-full h-full object-cover">-->
        <!--                <div class="absolute top-2 right-2 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">新品</div>-->
        <!--            </div>-->
        <!--            <div class="p-4 product-content">-->
        <!--                <div class="flex justify-between items-start">-->
        <!--                    <h3 class="font-semibold text-lg mb-1">超极智能手机 X</h3>-->
        <!--                    <button class="text-gray-400 hover:text-red-500">-->
        <!--                        <i class="far fa-heart"></i>-->
        <!--                    </button>-->
        <!--                </div>-->
        <!--                <p class="text-gray-600 text-sm mb-3">6.7英寸AMOLED，108MP摄像头，8K视频</p>-->
        <!--                <div class="product-footer">-->
        <!--                    <div class="flex justify-between items-center">-->
        <!--                        <div>-->
        <!--                            <span class="text-indigo-600 font-bold">¥899.99</span>-->
        <!--                        </div>-->
        <!--                        <button class="add-to-cart bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition" onclick="addToCart('超极智能手机 X', 899.99)">-->
        <!--                            <i class="fas fa-cart-plus mr-1"></i> 加入购物车-->
        <!--                        </button>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->

        <!--        &lt;!&ndash; 产品 4 &ndash;&gt;-->
        <!--        <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">-->
        <!--            <div class="relative overflow-hidden h-64">-->
        <!--                <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80" alt="耳机" class="product-image w-full h-full object-cover">-->
        <!--            </div>-->
        <!--            <div class="p-4 product-content">-->
        <!--                <div class="flex justify-between items-start">-->
        <!--                    <h3 class="font-semibold text-lg mb-1">专业监听耳机</h3>-->
        <!--                    <button class="text-gray-400 hover:text-red-500">-->
        <!--                        <i class="far fa-heart"></i>-->
        <!--                    </button>-->
        <!--                </div>-->
        <!--                <p class="text-gray-600 text-sm mb-3">专业音质，混音专用</p>-->
        <!--                <div class="product-footer">-->
        <!--                    <div class="flex justify-between items-center">-->
        <!--                        <div>-->
        <!--                            <span class="text-indigo-600 font-bold">¥129.99</span>-->
        <!--                        </div>-->
        <!--                        <button class="add-to-cart bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition" onclick="addToCart('专业监听耳机', 129.99)">-->
        <!--                            <i class="fas fa-cart-plus mr-1"></i> 加入购物车-->
        <!--                        </button>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->
    </div>

<!--    <div class="mt-12 flex justify-center">-->
<!--        <nav class="flex items-center space-x-2">-->
<!--            <button class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-100">-->
<!--                <i class="fas fa-chevron-left"></i>-->
<!--            </button>-->
<!--            <button class="px-3 py-1 rounded bg-indigo-600 text-white">1</button>-->
<!--            <button class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-100">2</button>-->
<!--            <button class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-100">3</button>-->
<!--            <span class="px-2 text-gray-500">...</span>-->
<!--            <button class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-100">8</button>-->
<!--            <button class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-100">-->
<!--                <i class="fas fa-chevron-right"></i>-->
<!--            </button>-->
<!--        </nav>-->
<!--    </div>-->
</main>

<!-- 简化页脚 -->
<footer class="bg-gray-800 text-white py-8">
    <div class="container mx-auto px-4 text-center">
        <div class="mb-4">
            <h3 class="text-xl font-bold mb-2">轻松购</h3>
            <p class="text-gray-400">您的一站式最新电子产品和数码设备购物平台</p>
        </div>
        <div class="flex justify-center space-x-6 mb-4">
            <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
            <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
            <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
        </div>
        <p class="text-gray-400 text-sm">© 2023 轻松购. 保留所有权利</p>
    </div>
</footer>

<!-- 购物车侧边栏 -->
<div id="cart-sidebar"
     class="fixed top-0 right-0 h-full w-80 bg-white shadow-lg transform translate-x-full transition-transform duration-300 z-50">
    <div class="p-4 border-b border-gray-200 flex justify-between items-center">
        <h3 class="text-lg font-semibold">您的购物车 (3)</h3>
        <button id="close-cart" class="text-gray-500 hover:text-gray-700">
            <i class="fas fa-times"></i>
        </button>
    </div>
    <div class="p-4 h-3/4 overflow-y-auto">
        <!-- 购物车商品将动态添加到这里 -->
        <div id="cart-items"></div>
    </div>
    <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200 bg-white">
        <div class="flex justify-between mb-4">
            <span class="font-semibold">总计:</span>
            <span id="cart-total" class="font-bold">¥0.00</span>
        </div>
        <button class="w-full bg-indigo-600 text-white py-2 rounded-md hover:bg-indigo-700 transition">
            结算
        </button>
    </div>
</div>
<div id="cart-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div>

<script>
    // 购物车功能
    let cart = [];
    let cartTotal = 0;
    let cartCount = 0;

    function addToCart(name, price) {
        cart.push({name, price});
        cartTotal += price;
        cartCount++;

        // 更新购物车UI
        updateCartUI();

        // 显示成功消息
        showToast(`${name} 已加入购物车!`);
    }

    function updateCartUI() {
        // 更新页眉中的购物车数量
        document.querySelector('.fa-shopping-cart').nextElementSibling.textContent = cartCount;

        // 更新购物车侧边栏
        const cartItemsContainer = document.getElementById('cart-items');
        const cartTotalElement = document.getElementById('cart-total');

        cartItemsContainer.innerHTML = '';

        if (cart.length === 0) {
            cartItemsContainer.innerHTML = '<p class="text-gray-500 text-center py-4">您的购物车是空的</p>';
            cartTotalElement.textContent = '¥0.00';
        } else {
            cart.forEach(item => {
                const cartItem = document.createElement('div');
                cartItem.className = 'flex justify-between items-center py-3 border-b border-gray-100';
                cartItem.innerHTML = `
                        <div>
                            <h4 class="font-medium">${item.name}</h4>
                            <p class="text-sm text-gray-500">¥${item.price.toFixed(2)}</p>
                        </div>
                        <button class="text-red-500 hover:text-red-700">
                            <i class="fas fa-trash"></i>
                        </button>
                    `;
                cartItemsContainer.appendChild(cartItem);
            });

            cartTotalElement.textContent = `¥${cartTotal.toFixed(2)}`;
        }
    }

    function showToast(message) {
        const toast = document.createElement('div');
        toast.className = 'fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-4 py-2 rounded-md shadow-lg flex items-center';
        toast.innerHTML = `
                <i class="fas fa-check-circle mr-2"></i>
                <span>${message}</span>
            `;
        document.body.appendChild(toast);

        setTimeout(() => {
            toast.classList.add('opacity-0', 'transition-opacity', 'duration-300');
            setTimeout(() => toast.remove(), 300);
        }, 3000);
    }

    // 切换购物车侧边栏
    document.querySelector('.fa-shopping-cart').parentElement.addEventListener('click', () => {
        document.getElementById('cart-sidebar').classList.remove('translate-x-full');
        document.getElementById('cart-overlay').classList.remove('hidden');
    });

    document.getElementById('close-cart').addEventListener('click', () => {
        document.getElementById('cart-sidebar').classList.add('translate-x-full');
        document.getElementById('cart-overlay').classList.add('hidden');
    });

    document.getElementById('cart-overlay').addEventListener('click', () => {
        document.getElementById('cart-sidebar').classList.add('translate-x-full');
        document.getElementById('cart-overlay').classList.add('hidden');
    });

    // 导航活动状态管理
    // const navLinks = document.querySelectorAll('.nav-link');
    // navLinks.forEach(link => {
    //     link.addEventListener('click', function(e) {
    //         e.preventDefault();
    //         navLinks.forEach(l => l.classList.remove('active'));
    //         this.classList.add('active');
    //     });
    // });

    // 初始化空购物车
    updateCartUI();
</script>
</body>
</html>